<template>
  <div class="chart-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="概况" name="1">
        <el-row>
          <el-col :span="24" class="toolbar">
            <el-card>
              <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间">
              </el-date-picker>

              <el-select v-model="form.val" placeholder="选择类型">
                <el-option label="水" value="1">
                </el-option>
                <el-option label="电能" value="2">
                </el-option>
              </el-select>

              <el-button type="primary">确定</el-button>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">预警数</h4>
              <div class="c-t-ct" style="color:#20A0FF;">5个</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">高危预警</h4>
              <div class="c-t-ct" style="color:#FF4949;" @click="activeName='2'">1个</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">中危预警</h4>
              <div class="c-t-ct" style="color:#13CE66;">2个</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">低危预警</h4>
              <div class="c-t-ct" style="color:#13CE66;">2个</div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-card class="charts-card">
              <div id="chart_101_1" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="9">
            <el-card class="charts-card">
              <div id="chartColumn" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-card class="charts-card">
              <!-- <div id="chartLine" style="width:100%; height:400px;"></div> -->
              <img src="../../assets/hj/670305685.jpg" alt="" style="width: 100%;height: 400px;">

            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="charts-card">
              <el-table :data="tableData_1" style="width: 100%">
                <el-table-column prop="address" label="区域" width="180">
                </el-table-column>
                <el-table-column prop="an" label="氨气" width="180">
                </el-table-column>
                <el-table-column prop="s" label="硫化氢">
                </el-table-column>
                <el-table-column prop="voc" label="voc">
                </el-table-column>
              </el-table>

            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="分析预测" name="2">
        <el-alert title=" 废液 连续多天过高,超过预警范围，将影响其他设备，已触发 3级预警！" type="error" show-icon @click="gopage104_3">
        </el-alert>
        <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <div id="chart101_2_1" style="width:100%; height:300px;"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加模型</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_2_1" style="width: 100%">
                    <el-table-column prop="name" label="模型名称">
                    </el-table-column>
                    <el-table-column prop="y" label="废液(ml)">
                    </el-table-column>
                    <el-table-column prop="q" label="废气(ml)"></el-table-column>
                    <el-table-column prop="g" label="固废(m³)"></el-table-column>
                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="推荐值" width="180">
                      <template scope="scope">
                        <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                        </el-rate>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <!-- <el-row>
                                    <el-col :span="12">
                                      <el-card class="charts-card">
                                        <div id="chartQSDB" style="width:100%; height:400px;"></div>
                                      </el-card>
                                    </el-col>
                                    <el-col :span="12">
                                      <el-card class="charts-card">
                                        <div id="chartFXDB" style="width:100%; height:400px;"></div>
                                      </el-card>
                                    </el-col>
                                  </el-row>
                                  <el-row>
                                    <el-col :span="12">
                                      <el-card class="charts-card">
                                        <div id="chartLSQS" style="width:100%; height:400px;"></div>
                                      </el-card>
                                    </el-col>
                                    <el-col :span="12">
                                      <el-card class="charts-card">
                                        <div id="chartZBYC" style="width:100%; height:400px;"></div>
                                      </el-card>
                                    </el-col>
                                  </el-row> -->
      </el-tab-pane>
      <el-tab-pane label="配置规则" name="3">
        <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加设备</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_3_1" style="width: 100%">
                    <el-table-column prop="name" label="设备名称">
                    </el-table-column>
                    <el-table-column prop="type" label="类型">
                    </el-table-column>
                    <el-table-column prop="y" label="电压">
                    </el-table-column>
                    <el-table-column prop="q" label="气压"></el-table-column>
                    <el-table-column prop="g" label="温度"></el-table-column>
                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card class="charts-card">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加通道</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_3_2" style="width: 100%">
                    <el-table-column prop="name" label="通道名称">
                    </el-table-column>
                    <el-table-column prop="type" label="类型">
                    </el-table-column>
                    <el-table-column prop="q" label="区域"></el-table-column>
                    <el-table-column prop="j" label="洁净度"></el-table-column>
                    <el-table-column prop="y" label="压力"></el-table-column>
                    <el-table-column prop="z" label="阻力值"></el-table-column>
                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card class="charts-card">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加产线</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_3_3" border style="width: 100%">
                    <el-table-column prop="name" label="产线名称">
                    </el-table-column>
                    <el-table-column prop="qy" label="区域">
                    </el-table-column>
                    <el-table-column label="投料" align="center">
                      <el-table-column prop="y" label="液体(ml)"></el-table-column>
                      <el-table-column prop="q" label="气体(ml)"></el-table-column>
                      <el-table-column prop="g" label="固体(m³)"></el-table-column>
                    </el-table-column>
                    <el-table-column label="废料" align="center">
                      <el-table-column prop="y" label="废液(ml)"></el-table-column>
                      <el-table-column prop="q" label="废气(ml)"></el-table-column>
                      <el-table-column prop="g" label="固废(m³)"></el-table-column>
                    </el-table-column>
                    <el-table-column prop="cl" label="产量(件)">
                    </el-table-column>

                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="推荐值" width="180">
                      <template scope="scope">
                        <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                        </el-rate>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                      <template scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      form: {},
      activeName: '1',
      tableData: [{
        date: '2016-05-03',
        name: '配置1',
        times: '每小时',
        num: 'xx',
        thx: '设备A',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '配置1',
        times: '每小时',
        num: 'xx',
        thx: '设备A',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '配置1',
        times: '每小时',
        num: 'xx',
        thx: '设备A',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '配置1',
        times: '每小时',
        num: 'xx',
        thx: '设备A',
        zip: 200333
      }],
      tableData_1: [{
        address: 'A区',
        an: '100.8',
        s: '23.2',
        voc: '232.3',
      }, {
        address: 'B区',
        an: '70.8',
        s: '53.2',
        voc: '222.3',
      }, {
        address: 'C区',
        an: '100.8',
        s: '23.2',
        voc: '232.3',
      }, {
        address: 'D区',
        an: '130.8',
        s: '24.2',
        voc: '2 2.3',
      }, {
        address: 'E区',
        an: '130.8',
        s: '24.2',
        voc: '2 2.3',
      }, {
        address: 'F区',
        an: '130.8',
        s: '24.2',
        voc: '2 2.3',
      }, {
        address: 'G区',
        an: '130.8',
        s: '24.2',
        voc: '2 2.3',
      }, {
        address: 'H区',
        an: '130.8',
        s: '24.2',
        voc: '2 2.3',
      }, {
        address: 'N区',
        an: '130.8',
        s: '24.2',
        voc: '2 2.3',
      }],
      tableData_2_1: [{
        name: '智能推测1',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '100',
        tj: 3.5,
      }, {
        name: '智能推测2',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '0',
        tj: 4.5,
      }, {
        name: '智能推测3',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '0',
        tj: 2.5,
      }, {
        name: '人工推测1',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '0',
        tj: 1.5,
      }, {
        name: '人工推测1',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '0',
        tj: 3,
      }, {
        name: '人工推测1',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '0',
        tj: 2.5,
      }],
      tableData_3_1: [{
        name: '废水检测器1',
        type: '废水检测',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '100',
      }, {
        name: '废水检测器2',
        type: '废水检测',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '100',
      }, {
        name: '废气检测器1',
        type: '废气检测',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '100',
      }, {
        name: '废气检测器2',
        type: '废气检测',
        y: '193.87',
        q: '53.87',
        g: '675.87',
        status: '100',
      }],
      tableData_3_2: [{
        name: '废气通道1',
        type: '气体通道',
        j: '193.87',
        q: 'A区',
        y: '675.87',
        z: '675.87',
        status: '100',
      }, {
        name: '废气通道2',
        type: '气体通道',
        j: '193.87',
        q: 'B区',
        y: '675.87',
        z: '675.87',
        status: '100',
      }, {
        name: '废液通道1',
        type: '液体通道',
        j: '193.87',
        q: 'A区',
        y: '675.87',
        z: '675.87',
        status: '100',
      }, {
        name: '固废通道1',
        type: '固体通道',
        j: '193.87',
        q: 'A区',
        y: '675.87',
        z: '675.87',
        status: '100',
      }, {
        name: '废气通道1',
        type: '气体通道',
        j: '193.87',
        q: 'C区',
        y: '675.87',
        z: '675.87',
        status: '100',
      }],
      tableData_3_3: [{
        name: '显示器',
        qy: 'C区',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '5.2',
        tj: 3.5,
        status: '100',
      }, {
        name: '显示器2',
        qy: 'B区',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '5.2',
        tj: 2.5,
        status: '100',
      }, {
        name: '显示器3',
        qy: 'A区',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '5.2',
        tj: 4.5,
        status: '100',
      }],
      chartColumn: null,
      chartBar: null,
      chartLine: null,
      chartPie: null,
      chartFS: null,
      chartFQ: null,
      chartZS: null,
      chartFY: null,
      chartGF: null,
      chartQSDB: null,
      chartFXDB: null,
      chartLSQS: null,
      chartZBYC: null,
      chart_101_1: null,
      chart101_2_1: null,
    }
  },
  watch: {
    activeName() {
      // console.log('activeName')
      // this.drawCharts()
    }
  },
  methods: {
    gopage104_3() {
      console.log(2343)
    },
    drawChart1() {
      let dom = document.getElementById('chart_101_1')

      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart_101_1 = echarts.init(dom);
      let mainData = [];
      mainData.push({
        name: '废水',
        value: 342305,
        prevalue: 382305,
        hismax: 455898
      });
      mainData.push({
        name: '废气',
        value: 1332042,
        prevalue: 1552305,
        hismax: 1896900
      });
      mainData.push({
        name: '噪声',
        value: 305652,
        prevalue: 323305,
        hismax: 446783
      });
      mainData.push({
        name: '废液',
        value: 31861,
        prevalue: 30805,
        hismax: 77598
      });
      mainData.push({
        name: '固废',
        value: 114553,
        prevalue: 120105,
        hismax: 145898
      });
      let myChart = this.chart_101_1
      function createSeries(mainData) {
        var result = [];
        var insideLabel = {
          normal: {
            position: 'center',
            formatter: function(params) {
              if (params.name == "other")
                return "";
              return params.value + '\n' + params.name;
            },
            textStyle: {
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontSize: 18
            }
          }
        };
        var outsideLabel = {
          normal: {
            show: false
          }
        };
        var itemOthers = {
          normal: {
            color: '#ccc'
          }
        };
        for (var i = 0; i < mainData.length; i++) {
          var increase = mainData[i].value > mainData[i].prevalue;
          result.push({
            type: 'pie',
            center: [i * 20 + 10 + '%', '30%'],
            radius: ['25%', '28%'],
            label: insideLabel,
            data: [{
              name: 'other',
              value: mainData[i].hismax - mainData[i].value,
              itemStyle: itemOthers
            }, {
              name: mainData[i].name,
              value: mainData[i].value,
              prevalue: mainData[i].prevalue
            }],
            markPoint: {
              data: [{
                symbol: 'triangle',
                symbolSize: 15,
                symbolRotate: increase ? 0 : 180,
                itemStyle: {
                  normal: {
                    color: increase ? 'red' : 'green'
                  }
                },
                name: mainData[i].name,
                value: ((mainData[i].value - mainData[i].prevalue) * 100 / mainData[i].prevalue).toFixed(2) + '%',
                x: myChart.getWidth() * (i + 0.5) / 5 - 15,
                y: myChart.getHeight() * 0.45 + 15,
                label: {
                  normal: {
                    show: true,
                    position: 'right',
                    formatter: function(params) {
                      return params.value;
                    },
                    textStyle: {
                      color: increase ? 'red' : 'green'
                    }
                  }
                },
              }
              ]
            }
          });
        }
        return result;
      }
      this.chart_101_1.setOption({
        title: {
          text: '环保指标细分',
          x: 'left'
        },

        series: createSeries(mainData)
      });
    },
    drawColumnChart() {
      let dom = document.getElementById('chartColumn')

      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartColumn = echarts.init(dom);
      this.chartColumn.setOption({
        title: {
          text: '风险等级',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['level1', 'level2', 'level3', 'level4', 'level5']
        },
        series: [
          {
            name: '仪表盘实时监控',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: 'level1' },
              { value: 310, name: 'level2' },
              { value: 234, name: 'level3' },
              { value: 135, name: 'level4' },
              { value: 1548, name: 'level5' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },

    drawLineChart() {
      let dom = document.getElementById('chartLine')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartLine = echarts.init(dom);
      this.chartLine.setOption({
        title: {
          text: '环境热点区域显示'
        },
        angleAxis: {
          type: 'category',
          data: ['区域A', '区域B', '区域C', '区域D', '区域E', '区域F', '区域G'],
          z: 10
        },
        radiusAxis: {
        },
        polar: {
        },
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4, 3, 5, 1],
          coordinateSystem: 'polar',
          name: 'A',
          stack: 'a'
        }, {
          type: 'bar',
          data: [2, 4, 6, 1, 3, 2, 1],
          coordinateSystem: 'polar',
          name: 'B',
          stack: 'a'
        }, {
          type: 'bar',
          data: [1, 2, 3, 4, 1, 2, 5],
          coordinateSystem: 'polar',
          name: 'C',
          stack: 'a'
        }],
        legend: {
          show: true,
          data: ['A', 'B', 'C']
        }
      });
    },
    drawPieChart() {
      let dom = document.getElementById('chartPie')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartPie = echarts.init(dom);
      this.chartPie.setOption({
        title: {
          text: '设备状态预警',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} W'
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [{
            lte: 6,
            color: 'green'
          }, {
            gt: 6,
            lte: 8,
            color: 'red'
          }, {
            gt: 8,
            lte: 14,
            color: 'green'
          }, {
            gt: 14,
            lte: 17,
            color: 'red'
          }, {
            gt: 17,
            color: 'green'
          }]
        },
        series: [
          {
            name: '用电量',
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
            markArea: {
              data: [[{
                name: '危险段',
                xAxis: '07:30'
              }, {
                xAxis: '10:00'
              }], [{
                name: '危险段',
                xAxis: '17:30'
              }, {
                xAxis: '21:15'
              }]]
            }
          }
        ]
      });
    },

    drawGFChart() {
      let dom = document.getElementById('chartGF')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartGF = echarts.init(dom);
      var dataAxis = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''];
      var data = [308, 295, 177, 326, 262, 333, 103, 215, 338, 346, 426, 126, 332, 155, 304, 425, 398, 104, 131, 142];
      var yMax = 500;
      var dataShadow = [];

      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      this.chartGF.setOption({
        title: {
          text: '固废具体监控情况',
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          { // For shadow
            type: 'bar',
            itemStyle: {
              normal: { color: 'rgba(0,0,0,0.05)' }
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: dataShadow,
            animation: false
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#FA8072' },
                    { offset: 0.5, color: '#FF6347' },
                    { offset: 1, color: '#FF0000' }
                  ]
                )
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#2378f7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                  ]
                )
              }
            },
            data: data
          }
        ]
      });
    },
    drawQSDBChart() {
      let dom = document.getElementById('chartQSDB')

      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartQSDB = echarts.init(dom);
      this.chartQSDB.setOption({
        title: {
          text: '能耗生产环境趋势对比'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['能耗', '环境', '生产']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '能耗',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '环境',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '生产',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      });
    },
    drawFXDBChart() {
      let dom = document.getElementById('chartFXDB')

      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartFXDB = echarts.init(dom);
      var colors = ['#5793f3', '#d14a61', '#675bba'];
      this.chartFXDB.setOption({
        title: {
          text: '气候环境分析对比'
        },
        color: colors,

        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['气候', '环境']
        },
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function(params) {
                  return '降水量  ' + params.value
                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                }
              }
            },
            data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
          },
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0]
              }
            },
            axisPointer: {
              label: {
                formatter: function(params) {
                  return '降水量  ' + params.value
                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                }
              }
            },
            data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '气候',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '环境',
            type: 'line',
            smooth: true,
            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
          }
        ]
      });
    },
    drawLSQSChart() {
      let dom = document.getElementById('chartLSQS')

      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartLSQS = echarts.init(dom);

      this.chartLSQS.setOption({
        title: {
          text: '分类指标历史趋势',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['指标1', '指标2']
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: '指标1',
            type: 'line',
            data: [11, 11, 15, 13, 12, 13, 10],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '指标2',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [
                { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' },
                [{
                  symbol: 'none',
                  x: '90%',
                  yAxis: 'max'
                }, {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '最大值'
                    }
                  },
                  type: 'max',
                  name: '最高点'
                }]
              ]
            }
          }
        ]
      });
    },
    drawChart101_2_1() {
      let dom = document.getElementById('chart101_2_1')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart101_2_1 = echarts.init(dom);
      this.chart101_2_1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['废水', '废气', '固废', '产量']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '环保值',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: '污染度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '废水',
            type: 'bar',
            data: [2.0, 4.9, 17.0, 53.2, 65.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '废气',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          }, {
            name: '固废',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '污染度',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            markLine: {
              lineStyle: {
                normal: {
                  type: 'solid',
                  color: 'rgb(180, 180, 180)'
                }
              },
              data: [{
                xAxis: '6号'
              }, {
                yAxis: 4.3
              }]
            }
          }
        ]
      });
    },
    drawZBYCChart() {
      let dom = document.getElementById('chartZBYC')

      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartZBYC = echarts.init(dom);

      this.chartZBYC.setOption({
        title: {
          text: '未来环境指标预测',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            var tar;
            if (params[1].value != '-') {
              tar = params[1];
            }
            else {
              tar = params[0];
            }
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
          }
        },
        legend: {
          data: ['上升', '下降']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          data: function() {
            var list = [];
            for (var i = 1; i <= 11; i++) {
              list.push('11月' + i + '日');
            }
            return list;
          }()
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '辅助',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              },
              emphasis: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              }
            },
            data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
          },
          {
            name: '收入',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
          },
          {
            name: '支出',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'bottom'
              }
            },
            data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
          }
        ]
      });
    },
    // 绘制
    drawCharts() {
      switch (this.activeName) {
        case '1':
          this.drawChart1()
          this.drawColumnChart()
          // this.drawBarChart()
          // this.drawLineChart()
          // this.drawPieChart()
          // this.drawGFChart()
          break;
        case '2':
          this.drawChart101_2_1()
          // this.drawQSDBChart()
          // this.drawFXDBChart()
          // this.drawLSQSChart()
          // this.drawZBYCChart()
          break;
        default:
          break
      }
    },
    // 刷新
    resizeAllChart() {
      switch (this.activeName) {
        case '1':
          this.chart_101_1.resize()
          this.chartColumn.resize()
          // this.chartBar.resize()
          // this.chartLine.resize()
          // this.chartPie.resize()
          // this.chartGF.resize()
          break;
        case '2':

          this.chart101_2_1.resize()
          // this.chartQSDB.resize()
          // this.chartFXDB.resize()
          // this.chartLSQS.resize()
          // this.chartZBYC.resize()
          break;
        default:
          break
      }

    }
  },
  mounted() {
    console.log('mounted')
    this.drawCharts()
    this.$nextTick(() => {
      window.onresize = this.resizeAllChart
    })
  },
  updated() {
    console.log('updated')
    this.drawCharts()
    this.resizeAllChart()
  }
}
</script>
<style scoped>
.chart-container {
  width: 100%;
  float: left;
}
</style>